<template>
	<div class="header">
		<div class="header-left">
			<div class="iconfont back-icon">&#xe624;</div>
		</div>
		<div class="header-input">
			<span class="iconfont">&#xe632;</span>
			输入城市/景点/游玩主题
		</div>
		<router-link to='/city'>
			<div class="header-right">
				{{this.city}}
				<!--{{this.doubleCity}}-->
				<span class="iconfont more-icon">&#xe6aa;</span>
			</div>
		</router-link>
		
	</div>
</template>

<script>
	import {mapState,mapGetters} from 'vuex'
	export default {
		name:'HomeHeader',
		computed:{
			...mapState(['city']),
			...mapGetters(['doubleCity'])
		}
	}
</script>
<!--使用 stylus-->
<!--scoped 局部样式，只对当前文件有效，避免对其他页面产生影响-->
<style lang="stylus" scoped>

/*@import '../../../assets/style/varibles.styl'*/
/*省略写法*/
/*@import '~@/assets/style/varibles.styl'*/
/*配置全局别名后的省略写法*/
@import '~style/varibles.styl'


.header {
	/*1rem = html font-size = 50px*/
	height: $HEADER_HEIGHT;
	line-height: $HEADER_HEIGHT;
	display: flex;
	background: $BG_COLOR;
	color: #fff;
}

		
.header-left 
	width: 0.64rem
	float: left

.back-icon 
	text-align:center
	font-size:.4rem

.header-input 
	flex: 1;
	background: #fff;
	border-radius: .1rem;
	margin-top: .12rem;
	height: .64rem;
	margin-left: .2rem;
	color: #ccc;
	line-height: .64rem;
	padding-left: .2rem;

.header-right 
	min-width: 1.04rem;
	padding: 0 .1rem
	float: right;
	text-align: center;
	color: #fff;
	.more-icon 
		font-size: .32rem
		

</style>